<template>
  <!--还款计划-->
  <div class="plan" v-show="isShowHtml">
    <ul  v-infinite-scroll="loadMore"
         infinite-scroll-disabled="loading"
         infinite-scroll-immediate-check="false"
         infinite-scroll-distance="10" v-if="planData.data.length>0">
      <li v-for="(item,index) in planData.data" >
        <div class="flexInli flexOne">
          <p>订单号{{item.loan_id}}</p>
          <b>第{{item.periods}}期</b>
        </div>
        <div class="flexInli flexTwo">{{item.amount}}</div>
        <div class="flexInli flexThree">
          <span>{{item.repayment_at.slice(2,10)}}</span>
          <b :class="item.pay_status==0?'colorOne':item.pay_status==1?'colorTwo':'colorThree'">{{status[item.pay_status]}}</b>
        </div>
      </li>
    </ul>
    <loading v-if="isLoading"></loading>

    <no-record v-if="planData.data.length===0"></no-record>
  </div>
</template>

<script>
  import NoRecord from './NoRecord'
  import loading from './../common/Loading'

  export default {
  name: 'Plan',
    components: {
      NoRecord,
      loading
    },
  data(){
    return{
      isShowHtml:false,
      isLoading:false,
      planData:{
        data:[],
        last_page:'1',
        current_page:'1'
      },
      status:{
        '0':'待还',
        '1':'已还',
        '2':'逾期'
      },
      id:''
      
    }
  },
  created(){
    this.$indicator.open()
  },
  mounted(){
    this.id = this.$route.query.id;
    this.$api.getLoanPayPlan({id:this.id}).then((res)=>{
      this.planData =res.data;
      this.$indicator.close();
      this.isShowHtml = true;
    }).catch(()=>{
      this.$indicator.close();
      this.isShowHtml = true;
    })
  },
  methods:{
    loadMore() {
      if (this.planData.current_page<this.planData.last_page) {
        this.isLoading = true;
        this.$api.getLoanPayPlan({id:this.id,page:this.planData.current_page+1}).then((res)=>{
          this.planData.current_page = res.data.current_page;
          this.planData.data=this.planData.data.concat(res.data.data);
          this.isLoading = false;
        }).catch(()=>{
          this.isLoading = false;
        })
      }
    }
  }
}
</script>

<style lang="scss" scoped>
  .plan{
    width: 100%;
    height: 100%;
    ul{
      padding: 0px 30px;
      background:rgba(255,255,255,1);
      li{
        width: 100%;
        padding:30px 0;
        display: flex;
        font-family:SourceHanSansCN-Regular;
        font-weight:400;
        .flexInli{
          flex: 1;
        }
        .flexOne{
          font-size:24px;
          color:rgba(153,153,153,1);
          b{
            font-size:28px;
            color:rgba(51,51,51,1);
          }
        }
        .flexTwo{
          font-size:48px;
          font-family:Arial-BoldMT;
          font-weight:bold;
          color:rgba(51,51,51,1);
          text-align: center;
        }
        .flexThree{
          width: 161px;
          font-size:24px;
          color:rgba(153,153,153,1);
          text-align: right;
          b{
            font-size:30px;
          }
          .coloOne{
            color:rgba(153,153,153,1);
          }
          .colorTwo{
            color:rgba(51,51,51,1);
          }
          .colorThree{
            color:rgba(231,31,24,1);
          }
        }

      }
    }
  }
</style>
